<template>
  <div class="components-container feature-out">
    <div class="filter-container">
      <el-date-picker
        v-model="datePicker"
        ref="pick"
        size="small"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="filter-item"
      >
      </el-date-picker>
      <el-select
        size="small"
        v-model="listQuery.source_name"
        clearable
        placeholder="请选择数据源"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in source_name"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listQuery.business"
        clearable
        placeholder="请选择业务"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in call_type"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        @click="handleFilter"
        type="primary"
        class="filter-item"
        ref="btnQuery"
        >查询</el-button
      >
      <el-button
        @click="handleReset"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >重置</el-button
      >
      <el-button
        @click="downloand"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >下载</el-button
      >
    </div>
    <el-alert
      :title="
        '调用次数:' +
          totalTitle.total +
          ';调用成功次数:' +
          totalTitle.sucTotal +
          ';成功率' +
          totalTitle.sucRate +
          ';金额:' +
          totalTitle.feeTotal
      "
      :closable="false"
      type="info"
      style="margin-bottom: 20px;"
    >
    </el-alert>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        label="时间"
        prop="date"
        align="center"
        width="160px"
      ></el-table-column>
      <el-table-column
        label="业务"
        prop="business"
        align="center"
        width="120px"
      ></el-table-column>
      <el-table-column
        label="数据源"
        prop="dataSource"
        align="center"
        width="120px"
      ></el-table-column>
      <el-table-column
        label="API"
        prop="api"
        align="center"
        width="200px"
      ></el-table-column>
      <el-table-column
        label="调用次数"
        prop="callCount"
        align="center"
      ></el-table-column>
      <el-table-column
        label="调用成功率"
        prop="callSuc"
        align="center"
      ></el-table-column>
      <el-table-column
        label="成功率"
        prop="callSucRate"
        align="center"
      ></el-table-column>
      <el-table-column
        label="合计费用"
        prop="totalFee"
        align="center"
      ></el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.current_page"
        :page-sizes="[10, 20, 30]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { parseTimeJS as parseTime } from '@/utils' // 时间控件
import { Message } from 'element-ui'
import {
  listDownload,
  getStatement
} from '@/api/risksystem/dataGateway/accountStatement.ts'
import { getNameMap, getTypeMap } from '@/api/risksystem/dataGateway/dataSource'

const defaultQuery = {}
@Component({
  name: 'trustTrial',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  private startDate = new Date().setTime(
    new Date().getTime() - 3600 * 1000 * 24 * 30
  )
  private endTime = new Date()
  private source_name = []
  private call_type = []
  private rule_typeOptions = [
    { type: 1, name: '每次进件调用' },
    { type: 2, name: '策略触发时调用' }
  ]
  private tableData = []
  private totalTitle = {
    total: 0,
    sucTotal: 0,
    sucRate: 0,
    feeTotal: 0
  }

  private total = 0
  private datePicker: any = [
    this.formatDate(new Date(this.startDate)),
    this.formatDate(new Date())
  ]
  private listQuery: any = {
    dataSource: '',
    business: '',
    limit: 20,
    current_page: 1,
    startTime: this.datePicker[0],
    endTime: this.datePicker[1]
  }
  created() {
    this.getNameMap()
    this.getTypeMap()
    this.getTable()
  }
  mounted() {
    // this.getApply()
  }
  @Watch('datePicker')
  private onDatePickerChange(value: boolean) {
    this.listQuery.startTime = this.datePicker ? this.datePicker[0] : undefined
    this.listQuery.endTime = this.datePicker ? this.datePicker[1] : undefined
  }
  private async getNameMap() {
    const { data } = await getNameMap()
    this.source_name = data
  }
  private async getTypeMap() {
    const { data } = await getTypeMap()
    this.call_type = data
  }
  // 列表获取
  private async getTable() {
    const { data } = await getStatement(this.listQuery)
    this.tableData = data.table
    this.totalTitle = data.total ? data.total : this.totalTitle
    this.total = data.dataTotal
  }

  // 查询、重置
  private handleFilter(val: string) {
    // this.listQuery.current_page = 1
    this.getTable()
  }
  // 跳转页码查询
  handleCurrentChange(val: any) {
    this.listQuery.page = val
    this.getTable()
  }
  // size切换查询
  handleSizeChange(val: any) {
    this.listQuery.limit = val
    this.getTable()
  }
  private handleReset(val: string) {
    this.datePicker = []
    this.listQuery = {
      dataSource: '',
      business: '',
      limit: 20,
      startTime: this.datePicker[0],
      endTime: this.datePicker[1]
    }
  }
  private async downloand() {
    // const res = await listDownload(this.listQuery)
    listDownload(this.listQuery).then(data => {
      if (!data) {
        Message({
          message: '文件下载失败',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(new Blob([data as any]), '对账单.xls')
      } else {
        let url = window.URL.createObjectURL(new Blob([data as any]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '对账单.xls')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) //下载完成移除元素
        window.URL.revokeObjectURL(url) //释放掉blob对象
      }
    })
  }
  private formatDate(now: any) {
    var year = now.getFullYear() //取得4位数的年份
    var month = now.getMonth() + 1 //取得日期中的月份，其中0表示1月，11表示12月
    var date = now.getDate() //返回日期月份中的天数（1到31）
    var hour = now.getHours() //返回日期中的小时数（0到23）
    var minute = now.getMinutes() //返回日期中的分钟数（0到59）
    var second = now.getSeconds() //返回日期中的秒数（0到59）
    return year + '-' + month + '-' + date
  }
}
</script>
<style scoped>
.components-container {
  padding: 20px;
}
</style>
